<template>
  <table class="zz-scene-table">
    <tr>
      <td class="first-col">地形夸张系数({{ terrainExaggeration }})</td>
      <td class="secode-col">
        <el-slider :max="10" :min="0.1" :step="0.1" v-model="terrainExaggeration" placement="right" />
      </td>
    </tr>
    <tr>
      <td class="first-col">昼夜区域</td>
      <td class="secode-col">
        <el-switch v-model="enableLighting" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">绘制地面大气</td>
      <td class="secode-col">
        <el-switch v-model="showGroundAtmosphere" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">地形深度监测</td>
      <td class="secode-col">
        <el-switch v-model="depthTestAgainstTerrain" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">显示底图</td>
      <td class="secode-col">
        <el-switch v-model="showBasemap" inline-prompt active-text="是" inactive-text="否" />
      </td>
    </tr>
    <tr>
      <td class="first-col">地球背景色</td>
      <td class="secode-col">
        <el-color-picker v-model="baseColor"></el-color-picker>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data(){
    return{
      viewer: undefined,
      enableLighting:false,
      showGroundAtmosphere:false,
      depthTestAgainstTerrain:false,
      showBasemap:false,
      baseColorL:'',
      terrainExaggeration:0
    }
  },  
  beforeMount(){
    this.viewer = this.$store.state.viewer
    this.settingOptions = this.viewer.zz._settingOptions;
    this.enableLighting = this.settingOptions.getOption('enableLighting')
    this.terrainExaggeration = this.settingOptions.getOption('terrainExaggeration')
    this.showGroundAtmosphere = this.settingOptions.getOption('showGroundAtmosphere')
    this.depthTestAgainstTerrain = this.settingOptions.getOption('depthTestAgainstTerrain')
    this.showBasemap = this.settingOptions.getOption('showBasemap')
    this.baseColor = this.settingOptions.getOption('baseColor')
  },
  watch:{
      enableLighting:function(newValue){this.settingOptions.setOption('enableLighting', newValue)},
      terrainExaggeration:function(newValue){this.settingOptions.setOption('terrainExaggeration', newValue)},
      showGroundAtmosphere:function(newValue){this.settingOptions.setOption('showGroundAtmosphere', newValue)},
      depthTestAgainstTerrain:function(newValue){this.settingOptions.setOption('depthTestAgainstTerrain', newValue)},
      showBasemap:function(newValue){this.settingOptions.setOption('showBasemap', newValue)},
      baseColor:function(newValue){this.settingOptions.setOption('baseColor', newValue)}
    },
}
</script>
<style>
@import "./sceneConfig.css"
</style>
